<template>
  <div id="resume">
    <top-bar></top-bar>

    <div id="resume-main">
      <div id="resume-topBar">
        <el-button size="small" round type="success">个人简历一</el-button>
        <el-button size="small" round type="success">个人简历一</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" circle></el-button>
      </div>
      <div class="resume-container">

        <div class="left">
          <el-divider><div class="rec-type">实践经历</div></el-divider>
          <!--    经历      -->
          <experience></experience>

          <el-divider><div class="rec-type">专业技能</div></el-divider>

          <!--    专业技能      -->
          <skills></skills>
          <el-divider><div class="rec-type">获得证书</div></el-divider>
          <certificate></certificate>
          <el-divider><div class="rec-type">自我总结</div></el-divider>
          <!--     自我总结      -->
          <introduction></introduction>
        </div>
        <div class="right">
          <div class="resume-avatar">
            <img src="../../assets/img/Avatar.jpg" alt="">
            <p>点击更换头像</p>
            <h1>周杰伦</h1>
            <p class="position">意向岗位:前端开发工程师</p>
          </div>
          <div class="resume-msg">
            <p>男/24岁</p>
            <p>湖南工业大学</p>
            <p>软件工程专业</p>
          </div>
          <div class="resume-tag">
            <h4>我的技能标签</h4>
            <my-tags></my-tags>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import certificate from "@/views/Resume/certificate";
import TopBar from "@/components/content/TopBar";
import myTags from "@/views/Resume/myTags";
import Experience from "@/views/Resume/experience";
import Skills from "@/views/Resume/skills";
import Introduction from "@/views/Resume/introduction";
export default {
  name: "index",
  components: {Introduction, Skills, Experience, TopBar,myTags,certificate},
}
</script>

<style lang="stylus" scoped>
#resume
  width 100%
  height 100vh
#resume-main
  width 100%
  background rgb(237,237,237)
  display flex
  flex-direction column
  justify-content center
  align-items center
.resume-container
  width 72%
  box-shadow 0px 0px 2px gray
  display flex
  &>.left
    padding 30px 40px
    width 70%
    height 100%
    background rgb(254,254,254)
    color #5f1010
  &>.right
    width 30%
    height 100%
    display flex
    flex-direction column
    padding 10px 12px
.resume-avatar
  width 100%
  height 200px
  display flex
  flex-direction column
  justify-content space-around
  align-items center
  color #3b8076
  &>.position
    color rgb(7,180,141)
  &>img
    height 80px
    width 80px
    border-radius 50%
.resume-msg
  color #d29251
  width 100%
  height 140px
  margin-top 20px
  display flex
  flex-direction column
  justify-content space-around
  align-items center
.resume-tag
  display flex
  flex-direction column
  height 200px
  align-items center
.rec-type
  width 100px
  display flex
  justify-content center
  align-items center
  height 30px
  background rgb(237,237,237)
  border-radius 40px
#resume-topBar
  padding 15px 0
  width 72%
  height 60px
  display flex
  align-items center
.resume-tab
  background orange
  height 100%
  display flex
  justify-content center
  align-items center
  margin-right 20px
  border-radius 20px
  cursor pointer
</style>
